<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!--  商品详细页面  -->
<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8" />
<title>彩妆  商城</title>
  <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="/Shopping/static/css/bootstrap.min.css"  type="text/css">
	<link rel="stylesheet" href="/Shopping/static/css/font-slider.css"  type="text/css">
	<!-- Custom CSS -->
    <link rel="stylesheet" href="/Shopping/static/css/style.css">
	
	
	<!-- Custom Fonts -->
    <link rel="stylesheet" href="/Shopping/static/css/font-awesome.min.css"  type="text/css">
    <link rel="stylesheet" href="fonts/font-slider.css" type="text/css">
	
	<!-- jQuery and Modernizr-->
	<script src="/Shopping/static/js/jquery-2.1.1.js"></script>
		<script src="/Shopping/static/lib/layer/2.4/layer.js"></script>
	
	<!-- Core JavaScript Files -->  	 
    <script src="/Shopping/static/js/bootstrap.min.js"></script>
	

</head>
<body>
<!--Top-->
	<nav id="top">
		<div class="container">
			<div class="row">
			
				<ul class="top-link">
						<li id="login"><a href="/Shopping/Account/account"><span class="glyphicon glyphicon-user"></span> 登陆</a></li>
						<li  id="join"><a href="/Shopping/Join/join"><span class="glyphicon glyphicon-envelope"></span> 注册</a></li>
						<li ><a href="/Shopping/PersonInfo/personInfo" id="account"><span class="glyphicon glyphicon-user"></span> 我的账户中心</a></li>
					</ul>
				</div>	
					
		</div>

	</nav>
	<!--Header-->
<header class="container">
		<div class="row">
			<div class="col-md-4">
				<div id="logo">
					<font size="10" color="#cc3300" face="宋体"><i><strong>Shoopping</strong></i>
				</font></div>
			</div>
			<div class="col-md-4">
				<form class="form-search">  
					<input type="text" class="input-medium search-query">  
					<button type="button" class="btn"><span class="glyphicon glyphicon-search"></span></button>  
				</form>
			</div>
			<div class="col-md-4">
				<div id="cart"><a  id="shopcart" class="btn btn-1"><span class="glyphicon glyphicon-shopping-cart"></span>购物车</a></div>
			</div>
		</div>
	</header>
	<!--Navigation-->
	<!--//////////////////////////////////////////////////-->
	<!--///////////////////Product Page///////////////////-->
	<!--//////////////////////////////////////////////////-->
	  <nav id="menu" class="navbar">
		<div class="container">
			<div class="navbar-header"><span id="heading" class="visible-xs">目录</span>
			  <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
			</div>
			<div class="collapse navbar-collapse navbar-ex1-collapse">
				<ul class="nav navbar-nav">
					<li><a href="/Shopping/Category/category">首页</a></li>
					<li><a href="/Shopping/Category/category">目录</a></li>
					
				
						<div class="dropdown-menu">
							<div class="dropdown-inner">
								<ul class="list-unstyled">
									<li><a href="category.html"></a></li>
										<li><a href="category.html"></a></li>
									<li><a href="category.html"></a></li>
								</ul>
							</div>
						</div>
					</li>

				</ul>
			</div>
		</div>
	</nav>
	<div id="page-content" class="single-page">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<ul class="breadcrumb">

					</ul>
				</div>
			</div>
			<div class="row">
				<div id="main-content" class="col-md-8">
					<div class="product">
						<div class="col-md-6">
							<div class="image" >
								<img src="/Shopping/static/img/${product.imgAddress}" />
							<div class="image-more">
									 <ul class="row">
										 <li class="col-lg-3 col-sm-3 col-xs-4">
											<a href="#"><img class="img-responsive" src="/Shopping/static/img/${product.imgAddress}"></a>
										</li>
										<li class="col-lg-3 col-sm-3 col-xs-4">
											<a href="#"><img class="img-responsive" src="/Shopping/static/img/${product.imgAddress}"></a>
										</li>
										<li class="col-lg-3 col-sm-3 col-xs-4">
											<a href="#"><img class="img-responsive" src="/Shopping/static/img/${product.imgAddress}"></a>
										</li>

									</ul>
								</div>

							</div>
						</div>
						<div class="col-md-6">
							<div class="caption">
							
								<div class="name" align="center">
									<ul>
									<font size="8" color="#666666" face="宋体"><strong><li id="productName">${product.productName}</li></strong>
									</font>
										
										<li></li>
										</br>
									</ul>
								</div>
								<div class="price"  align="center">￥${product.price}</br></br></div>
								</div>
								<div class="info">
									<ul>
										<li>${product.info}</li>
										</br>
									</ul>
								</div>
								<div>库存数量: ${product.stock}</div>
								<div class="well"><label>购买数量: </label> <input class="form-inline quantity" type="text" value="1" id="amount"></div>
								<div class="share well">
									<strong style="margin-right: 13px;"></strong>
									<a id="nowbuy" class="btn btn-2 ">立即购买</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<a id="addShopcart" class="btn btn-2 ">加入购物车</a>
								</div>
							</div>
						</div>
						<div class="clear"></div>
					</div>	
					
					
				</div>
				<div id="sidebar" class="col-md-4">
					
						
					
					
					</div>
					
				</div>
			</div>
		</div>
	</div>	
	
	
	<!-- IMG-thumb -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">         
          <div class="modal-body">                
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
	
	<script>
	$(document).ready(function(){
		clickShopcart();
		show();
		addShopcart();
		nowbuy();
		$(".nav-tabs a").click(function(){
			$(this).tab('show');
		});
		$('.nav-tabs a').on('shown.bs.tab', function(event){
			var x = $(event.target).text();         // active tab
			var y = $(event.relatedTarget).text();  // previous tab
			$(".act span").text(x);
			$(".prev span").text(y);
	
		});
		
	});
	function addShopcart(){//添加购物车事件
		if(!validateLogin()){ //未登录
			layer.msg('请您先登录',{icon:5,time:2000});
		}
		else
		{
			$("#addShopcart").click(function(){
				$.ajax({
					url:"/Shopping/Shopcart/addShopcart",
					type:"get",
					data:{"productName":$("#productName").text(),"price":$("#price").text(),"amount":$("#amount").val(),},
					dataType:"json",
					success:function(data){
						if(data.res==1){
						    layer.msg('加入购物车成功',{icon:1,time:2000});
						
							res = true;
						}
					},
					error:function(){
						alert('加入失败');
					}
				});
				
				
			});
		
		}
		
	}
	function clickShopcart(){//点击购物车按钮
		$("#shopcart").click(function(){
			if(!validateLogin()){ //未登录
				layer.msg('请您先登录',{icon:5,time:2000});
			} else {
				window.location.href="/Shopping/Shopcart/shopcart"
			}
		});
	}
	function validateLogin(){ //验证用户是否登录
		var res = false;
		$.ajax({
			url:"/Shopping/Login/validateLogin",
			type:"get",
			data:{},
			dataType:"json",
			async:false,
			success:function(data)
			{
				if(data.res==1){
				    //layer.msg('用户已登陆',{icon:1,time:2000});
					//window.location.href="${prePage}";
					res = true;
				}
				if(data.res==0){
				
					//layer.msg('用户未登陆',{icon:0,time:2000});
					res = false;
				}
			},
			error:function(){
				alert('error');
			}
			
		});
		return res;
	}
	function nowbuy()//立即购买事件
	{
		
		$("#nowbuy").click(function(){
			
			if(validateLogin()==true)
			{
					var productName=$("#productName").text();
					var amount=$("#amount").val();
					window.location.href="/Shopping/Checkorder/checkorder?productName="+productName+"&amount="+amount;
			
			} else {
				layer.msg('用户未登陆',{icon:0,time:2000});
			}		
		
		});
		
		
	}
	function show(){ //
		$("#account").hide();
		$("login").hide();
		$("join").hide();
		if(validateLogin()){
			$("#account").show();	
			$("#login").hide();
			$("#join").hide();
		} else {
			$("#login").show();
			$("#join").show();
		}
	}
	</script>
</body>
</html>